<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">

	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>云上医疗系统用户</title>
		<link href="css/login.css" rel="stylesheet" rev="stylesheet" type="text/css" media="all" />
		<script type="text/javascript" src="js/jquery-3.3.1.js"></script>
		<script type="text/javascript" src="js/jquery.SuperSlide.js"></script>
		<script type="text/javascript" src="js/Validform_v5.3.2.js"></script>
		<script type="text/javascript">
			$(function() {
				/*用户登录信息验证*/
				$("#stu_username_hide").focus(function() {
					var username = $(this).val();
					if(username == '输入用户名') {
						$(this).val('');
					}
				});
				$("#stu_username_hide").focusout(function() {
					var username = $(this).val();
					if(username == '') {
						$(this).val('输入用户名');
					}
				});
				$("#stu_password_hide").focus(function() {
					var username = $(this).val();
					if(username == '输入密码') {
						$(this).val('');
					}
				});
				$("#stu_password_hide").focusout(function() {
					var username = $(this).val();
					if(username == '') {
						$(this).val('输入密码');
					}
				});
				$("#stu_copy_password_hide").focus(function() {
					var username = $(this).val();
					if(username == '输入确认密码') {
						$(this).val('');
					}
				});
				$("#stu_copy_password_hide").focusout(function() {
					var username = $(this).val();
					if(username == '') {
						$(this).val('输入确认密码');
					}
				});
				$("#stu_code_hide").focus(function() {
					var username = $(this).val();
					if(username == '输入验证码') {
						$(this).val('');
					}
				});
				$("#stu_code_hide").focusout(function() {
					var username = $(this).val();
					if(username == '') {
						$(this).val('输入验证码');
					}
				});
				/*下面为框架的ajax表单校验，看不懂，已注释
				 需自己写ajax验证请求
				 * */
				//				$(".stu_login_error").Validform({
				//					tiptype: function(msg, o, cssctl) {
				//						var objtip = $(".stu_error_box");
				//						cssctl(objtip, o.type);
				//						objtip.text(msg);
				//					},
				//					ajaxPost: true
				//				});
			});
		</script>
		<script type="text/javascript">
			$(function() {
				$(".screenbg ul li").each(function() {
					$(this).css("opacity", "0");
				});
				$(".screenbg ul li:first").css("opacity", "1");
				var index = 0;
				var t;
				//var li = $(".screenbg ul li");
				var number = li.size();

				function change(index) {
					li.css("visibility", "visible");
					li.eq(index).siblings().animate({
						opacity: 0
					}, 3000);
					li.eq(index).animate({
						opacity: 1
					}, 3000);
				}

				function show() {
					index = index + 1;
					if(index <= number - 1) {
						change(index);
					} else {
						index = 0;
						change(index);
					}
				}
				t = setInterval(show, 8000);
				//根据窗口宽度生成图片宽度
				var width = $(window).width();
				$(".screenbg ul img").css("width", width + "px");
			});
			
			
		</script>
		
	</head>

	<body>
		<div id="tab">
			<!--  <div id="header">
		  		<label>用户注册</label>
		    </div>-->
			<div class="tab_box" style="height: 580px;">
				<p class="sign" >用户注册</p>
				<!-- 用户注册开始 -->
				<div>
					<div class="stu_error_box">${message}</div>
					<form action="adduser" method="get" class="stu_login_error" id="toreg" onsubmit="return reg()">
						<div id="username">
							<label>用&nbsp;户&nbsp;名&nbsp;&nbsp;&nbsp;：</label>
							<input type="text" id="stu_username_hide" name="userName" value="" placeholder="输入用户名" nullmsg="用户名不能为空！" onblur="checkUserNameGet()" datatype="s6-18" errormsg="用户名范围在6~18个字符之间！" sucmsg="用户名验证通过！" />
							<!--ajaxurl="demo/valid.jsp"--><br />
							<span id="s" ></span>
						</div>
						<div id="password">
							<label>密&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;码&nbsp;&nbsp;&nbsp;：</label>
							<input type="password" id="stu_password_hide" name="password"  placeholder="输入密码" nullmsg="密码不能为空！" datatype="*6-16" errormsg="密码范围在6~16位之间！" sucmsg="密码验证通过！" />
						</div>
						<div id="copy_password">
							<label>确认密码：</label>
							<input type="password" id="stu_copy_password_hide" name="copy_password" value=""  placeholder="输入确认密码" nullmsg="密码不能为空！" datatype="*6-16" errormsg="两次输入的密码不一致！" sucmsg="密码验证通过！" />
						</div>
						<div id="phobe">
							<label>手&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;机&nbsp;&nbsp;&nbsp;：</label>
							<input type="text" id="stu_phone_hide" name="userPhone" placeholder="输入手机号码" nullmsg="手机不能为空！" datatype="/^d{11}$/" errormsg="请输入正确的手机号！" sucmsg="手机号码验证通过！"/>
						</div>
						<div id="role">
							<label>注册角色：</label>&nbsp;&nbsp;&nbsp;
							<input type="radio" name="role" value="用户" datatype="" />用户&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
							<input type="radio" name="role" value="医生" datatype="" />医生&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
							<input type="radio" name="role" value="药商" datatype="" />药商
						</div>
						<div id="code">
							<label>验&nbsp;证&nbsp;码&nbsp;：</label>
							<input type="text" id="stu_code_hide" name="code" placeholder="输入验证码" nullmsg="验证码不能为空！" datatype="*4-4" errormsg="验证码有4位数！" sucmsg="验证码验证通过！" />
							<a href="javascript:;" title="点击更换" alt="验证码占位图"
                               onclick="document.getElementById('num').src = 'vcode.jpg?'+(new Date()).getTime()">
                                <img id="num" src="vcode.jpg"/> </a></div>
						<div id="login">
							<button type="submit" >注册</button>
						</div>
					</form>
				</div>
				<!-- 用户注册结束-->
			</div>
		</div>
		<div class="bottom">©2014 Leting
			<a href="javascript:;" target="_blank">关于</a> <span>京ICP证030173号</span> More Templates
			<a href="http://www.cssmoban.com/" target="_blank" title="模板之家">模板之家</a> - Collect from
			<a href="http://www.cssmoban.com/" title="网页模板" target="_blank">网页模板</a><img width="13" height="16" src="images/copy_rignt_24.png" /></div>
		<div class="screenbg">
			<ul>
				<li>
					<a href="javascript:;"><img src="images/bg1.jpg"></a>
				</li>
				<li>
					<a href="javascript:;"><img src="images/bg2.jpg"></a>
				</li>
				<li>
					<a href="javascript:;"><img src="images/bg3.jpg"></a>
				</li>
			</ul>
		</div>
	</body>
	<script>
	
			function checkUserNameGet() {
				var name = $("#stu_username_hide").val();
			    var span = $("#s");
				$.get("loginName",{"username":name},
				function(data){
					
					if(data == "y") {
						 span.css("color","red").html("用户名已存在");
					}else {
						span.css("color","green").html("用户名可注册");
					}
			   });
			}
			
			function reg(){
			
				 var v1 = document.getElementById('stu_username_hide').value;
				 var v2 = document.getElementById('stu_password_hide').value;
				 var v3 = document.getElementById('stu_copy_password_hide').value;
				 var v4 = document.getElementById('stu_phone_hide').value;
				 var v5 = document.getElementsByName('role');
				 var v6 = document.getElementById('stu_code_hide').value;
				 var span = $(".stu_error_box");
				 var resualt=false;
				//正则表达式，十一位数字的电话号码
				  var phoneReg = /^1[0-9]{10}$/;
				 //验证用户名
				 if(v1.length==0){
					 span.html("用户名不能为空");
					 return false;
				 }else if(v1.length<5 ||v1.length>20){
					 span.html("用户名长度不可超过5-20");
					 return false;
				 }
				 //验证密码
				 if(v2.length==0){
					 span.html("密码不能为空");
					 return false;
				 }else if(v2.length<6 ||v1.length>20){
					 span.html("密码长度不可超过6-20");
					 return false;
				 }
					//确认密码是否相同
				 if(v3 != v2 ){
					 span.html("两次输入密码不相同");
					 return false;
				 }
				 //验证手机号
				 if(v4.length==0){
					 span.html("手机号码不能为空");
					 return false;
				 }else if(!phoneReg.test(v4)){
					 span.html("请输入正确的手机号码");
					 return false;
				 }
					//验证用户类型是否勾选
				 for(var i=0;i<v5.length;i++){
					 if(v5[i].checked){
						 resualt=true;
					 }
				 }
				 if(!resualt){
					 span.html("用户类型不能为空");
					 return false;
				 }
				 //验证验证码
				 if(v6.length==0){
					 span.html("验证码不能为空");
					 return false;
				 }else if(v6.length != 4){
					 span.html("验证码为4位字符");
					 return false;
				 }
				 document.getElementById("toreg").submit();
			 }
			
		</script>

</html>